import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import { ArrowLeft, ChevronDown, RefreshCw } from "lucide-react";
import { getWorkspace } from "@/lib/session";
import { internalApi, InternalApiError, type CrawlJob, type CrawlPage, type CrawlPagesPage } from "@/lib/api";
import { formatBytes, formatDate, formatMs, formatNumber, timeAgo } from "@/lib/format";
import { PageHeader } from "@/components/ui/page-header";
import { Alert } from "@/components/ui/alert";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { CopyButton } from "@/components/ui/copy-button";
import { EmptyState } from "@/components/ui/empty-state";
import { Stat, StatGrid } from "@/components/ui/stat";
import { Table, TableBody, TableCell, TableEmpty, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { CrawlPageStatusBadge, CrawlStatusBadge } from "@/components/dashboard/crawls/crawl-status-badge";
import { CancelCrawlButton } from "@/components/dashboard/crawls/cancel-crawl-button";

export const dynamic = "force-dynamic";
export const metadata: Metadata = { title: "Crawl" };

const PAGE_SIZE = 100;
const PREVIEW_CHARS = 2000;
const PAGE_STATUSES = ["success", "blocked", "failed"] as const;

type SearchParams = Promise<{ cursor?: string | string[]; status?: string | string[] }>;

function first(v: string | string[] | undefined): string | undefined {
  return Array.isArray(v) ? v[0] : v;
}

function Row({ label, children, mono }: { label: string; children: React.ReactNode; mono?: boolean }) {
  return (
    <div className="grid grid-cols-[140px_1fr] gap-3 px-4 py-2.5 text-[13px] sm:grid-cols-[160px_1fr]">
      <dt className="text-fg-subtle">{label}</dt>
      <dd className={`min-w-0 break-all ${mono ? "font-mono tabular" : ""}`}>{children}</dd>
    </div>
  );
}

function optionValue(v: unknown): string {
  if (v === undefined || v === null) return "—";
  if (Array.isArray(v)) return v.length ? v.join(", ") : "—";
  if (typeof v === "object") return JSON.stringify(v);
  return String(v);
}

const OPTION_KEYS = ["max_pages", "max_depth", "format", "same_domain", "allow_subdomains", "respect_robots", "use_sitemap", "concurrency", "delay_ms", "timeout", "main_content", "country", "network", "browser", "browser_fallback", "include_patterns", "exclude_patterns", "webhook_url"] as const;

export default async function CrawlDetailPage({ params, searchParams }: { params: Promise<{ id: string }>; searchParams: SearchParams }) {
  const [ws, { id }, sp] = await Promise.all([getWorkspace(), params, searchParams]);
  if (!/^crawl_[A-Za-z0-9]{4,64}$/.test(id)) notFound();
  const cursor = first(sp.cursor)?.trim() || null;
  const statusFilter = first(sp.status)?.trim() || null;
  const status = statusFilter && (PAGE_STATUSES as readonly string[]).includes(statusFilter) ? statusFilter : null;

  let job: CrawlJob | null = null;
  let pages: CrawlPagesPage = { data: [], next_cursor: null };
  let loadError: string | null = null;
  try {
    job = await internalApi.getCrawl(ws.project.id, ws.user.id, id);
  } catch (e) {
    if (e instanceof InternalApiError && (e.status === 404 || e.code === "NOT_FOUND")) notFound();
    loadError = e instanceof InternalApiError ? e.message : "The Fetcha API service is unreachable.";
  }
  if (!job) {
    return (
      <div className="flex flex-col gap-5">
        <Link href="/dashboard/crawls" className="inline-flex items-center gap-1 text-[12.5px] text-fg-muted underline-offset-4 hover:text-fg hover:underline">
          <ArrowLeft className="size-3.5" /> Crawls
        </Link>
        <Alert variant="danger" title="Could not load this crawl">
          {loadError ?? "Unknown error."}
        </Alert>
      </div>
    );
  }
  try {
    pages = await internalApi.crawlPages(ws.project.id, ws.user.id, id, { cursor, limit: PAGE_SIZE, status });
  } catch (e) {
    loadError = e instanceof InternalApiError ? e.message : "Could not load the crawled pages.";
  }

  const active = job.status === "queued" || job.status === "running";
  const stats = job.stats ?? { discovered: 0, fetched: 0, ok: 0, blocked: 0, failed: 0, bytes: 0 };
  const hrefFor = (next: { cursor?: string | null; status?: string | null }) => {
    const q = new URLSearchParams();
    const st = next.status === undefined ? status : next.status;
    if (st) q.set("status", st);
    if (next.cursor) q.set("cursor", next.cursor);
    const s = q.toString();
    return `/dashboard/crawls/${job!.id}${s ? `?${s}` : ""}`;
  };
  // Only shown for finished jobs (a live elapsed counter would need a client component).
  const durationMs = job.started_at && job.completed_at ? new Date(job.completed_at).getTime() - new Date(job.started_at).getTime() : null;

  return (
    <div className="flex flex-col gap-5">
      <Link href="/dashboard/crawls" className="inline-flex items-center gap-1 text-[12.5px] text-fg-muted underline-offset-4 hover:text-fg hover:underline">
        <ArrowLeft className="size-3.5" /> Crawls
      </Link>
      <PageHeader
        eyebrow="Crawl"
        title={
          <span className="inline-flex flex-wrap items-center gap-2">
            <span className="min-w-0 break-all">{job.label ?? job.domain ?? job.seed_url}</span>
            <CrawlStatusBadge status={job.status} />
          </span>
        }
        description={
          <span className="flex flex-wrap items-center gap-x-2 gap-y-1">
            <span className="inline-flex items-center gap-1 font-mono text-[12.5px] text-fg">
              {job.id} <CopyButton value={job.id} className="size-6" />
            </span>
            <span className="text-fg-subtle">·</span>
            <a href={job.seed_url} target="_blank" rel="noreferrer noopener" className="min-w-0 break-all font-mono text-[12.5px] text-accent underline-offset-4 hover:underline">
              {job.seed_url}
            </a>
            <span className="text-fg-subtle">·</span>
            <span title={formatDate(job.created_at, { timeStyle: "medium" })}>created {timeAgo(job.created_at)}</span>
          </span>
        }
        actions={
          <>
            {active ? (
              <Button variant="outline" size="sm" asChild>
                <Link href={hrefFor({ cursor })} prefetch={false}>
                  <RefreshCw className="size-3.5" /> Refresh
                </Link>
              </Button>
            ) : null}
            {active ? <CancelCrawlButton id={job.id} /> : null}
          </>
        }
      />

      {job.error ? (
        <Alert variant="danger" title={job.error.code}>
          {job.error.message}
        </Alert>
      ) : null}
      {active ? (
        <Alert variant="info" title={job.status === "queued" ? "Queued" : "Running"}>
          {job.status === "queued" ? "The job is waiting for a worker slot. " : "Pages are being fetched. "}
          This page does not update on its own; use Refresh to see progress.
        </Alert>
      ) : null}

      <StatGrid cols={6}>
        <Stat label="Discovered" value={formatNumber(stats.discovered)} />
        <Stat label="Fetched" value={formatNumber(stats.fetched)} hint={`of ${formatNumber(Number(job.options?.max_pages ?? 0)) || "—"} max`} />
        <Stat label="OK" value={formatNumber(stats.ok)} />
        <Stat label="Blocked" value={formatNumber(stats.blocked)} />
        <Stat label="Failed" value={formatNumber(stats.failed)} />
        <Stat label="Bytes" value={formatBytes(stats.bytes)} hint={durationMs !== null ? `in ${formatMs(durationMs)}` : undefined} />
      </StatGrid>

      <div className="grid gap-5 lg:grid-cols-[minmax(0,1fr)_320px]">
        <div className="flex min-w-0 flex-col gap-3">
          <div className="flex flex-wrap items-center justify-between gap-2">
            <h2 className="text-[13px] font-semibold uppercase tracking-wide text-fg-subtle">Pages</h2>
            <nav className="flex items-center gap-1 text-[12.5px]" aria-label="Filter pages by status">
              <FilterLink href={hrefFor({ cursor: null, status: null })} active={!status}>
                All
              </FilterLink>
              {PAGE_STATUSES.map((s) => (
                <FilterLink key={s} href={hrefFor({ cursor: null, status: s })} active={status === s}>
                  {s}
                </FilterLink>
              ))}
            </nav>
          </div>
          {loadError ? (
            <Alert variant="danger" title="Could not load pages">
              {loadError}
            </Alert>
          ) : null}
          <Card className="overflow-hidden">
            <Table>
              <TableHeader>
                <TableRow className="hover:bg-transparent">
                  <TableHead>URL</TableHead>
                  <TableHead>Status</TableHead>
                  <TableHead className="text-right">HTTP</TableHead>
                  <TableHead className="text-right">Depth</TableHead>
                  <TableHead className="text-right">Bytes</TableHead>
                  <TableHead className="text-right">Duration</TableHead>
                  <TableHead>Mode</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {pages.data.length === 0 ? (
                  <TableEmpty colSpan={7}>{active ? "No pages fetched yet." : status ? `No ${status} pages.` : "No pages were fetched."}</TableEmpty>
                ) : (
                  pages.data.map((p) => <PageRow key={p.id} page={p} />)
                )}
              </TableBody>
            </Table>
          </Card>
          <div className="flex flex-wrap items-center justify-between gap-3 text-[12.5px] text-fg-muted">
            <span className="font-mono tabular">
              {formatNumber(pages.data.length)} page{pages.data.length === 1 ? "" : "s"} shown{cursor ? " (continued)" : ""}
            </span>
            <div className="flex items-center gap-2">
              {cursor ? (
                <Button variant="ghost" size="sm" asChild>
                  <Link href={hrefFor({ cursor: null })}>First page</Link>
                </Button>
              ) : null}
              {pages.next_cursor ? (
                <Button variant="outline" size="sm" asChild>
                  <Link href={hrefFor({ cursor: pages.next_cursor })} rel="next" prefetch={false}>
                    Load more <ChevronDown className="size-3.5" />
                  </Link>
                </Button>
              ) : null}
            </div>
          </div>
        </div>

        <aside className="flex flex-col gap-4">
          <Card>
            <CardHeader className="pb-1">
              <CardTitle className="text-[14px]">Job</CardTitle>
            </CardHeader>
            <dl className="divide-y divide-border">
              <Row label="Domain" mono>
                {job.domain}
              </Row>
              <Row label="Created">{formatDate(job.created_at, { timeStyle: "medium" })}</Row>
              <Row label="Started">{job.started_at ? formatDate(job.started_at, { timeStyle: "medium" }) : <span className="text-fg-subtle">not yet</span>}</Row>
              <Row label="Completed">{job.completed_at ? formatDate(job.completed_at, { timeStyle: "medium" }) : <span className="text-fg-subtle">{active ? "in progress" : "—"}</span>}</Row>
            </dl>
          </Card>
          <Card>
            <CardHeader className="pb-1">
              <CardTitle className="text-[14px]">Options</CardTitle>
            </CardHeader>
            <dl className="divide-y divide-border">
              {OPTION_KEYS.filter((k) => job!.options && job!.options[k] !== undefined && job!.options[k] !== null && !(Array.isArray(job!.options[k]) && (job!.options[k] as unknown[]).length === 0)).map((k) => (
                <Row key={k} label={k} mono>
                  {optionValue(job!.options[k])}
                </Row>
              ))}
            </dl>
          </Card>
          <Card>
            <CardHeader className="pb-2">
              <CardTitle className="text-[14px]">Reading this page</CardTitle>
            </CardHeader>
            <CardContent className="space-y-2 text-[12.5px] text-fg-muted">
              <p>
                <strong className="text-fg">Mode</strong> shows whether a page was fetched over plain HTTP or rendered in the managed browser after a JavaScript challenge.
              </p>
              <p>
                Click a URL row to expand the first {formatNumber(PREVIEW_CHARS)} characters of the stored content. Retrieve the full content with <code className="font-mono">GET /v1/crawl/:id/pages</code>.
              </p>
              <p>
                Each page is also a request in <Link href="/dashboard/requests" className="underline-offset-4 hover:underline">Requests</Link> with source <code className="font-mono">crawl</code>.
              </p>
            </CardContent>
          </Card>
        </aside>
      </div>
      {!pages.data.length && !active && !loadError && !status ? <EmptyState compact title="Nothing to show" description="The crawl finished without fetching a page. Check the seed URL, robots.txt and the include/exclude patterns." /> : null}
    </div>
  );
}

function FilterLink({ href, active, children }: { href: string; active: boolean; children: React.ReactNode }) {
  return (
    <Link href={href} prefetch={false} className={`rounded-md px-2 py-1 capitalize transition-colors ${active ? "bg-bg-muted font-medium text-fg" : "text-fg-muted hover:bg-bg-subtle hover:text-fg"}`} aria-current={active ? "page" : undefined}>
      {children}
    </Link>
  );
}

function PageRow({ page: p }: { page: CrawlPage }) {
  const preview = typeof p.content === "string" && p.content.length ? p.content.slice(0, PREVIEW_CHARS) : null;
  const truncated = typeof p.content === "string" && p.content.length > PREVIEW_CHARS;
  return (
    <TableRow className="group">
      <TableCell colSpan={7} className="p-0">
        <details className="[&_summary::-webkit-details-marker]:hidden">
          <summary className="grid cursor-pointer list-none grid-cols-[minmax(0,1fr)_7rem_4rem_4rem_5.5rem_5.5rem_5rem] items-center gap-3 px-4 py-2.5 text-[13px] hover:bg-bg-subtle/60">
            <span className="min-w-0">
              <span className="flex items-center gap-1.5">
                <ChevronDown className="size-3.5 shrink-0 text-fg-subtle transition-transform group-has-[details[open]]:rotate-180" aria-hidden />
                <span className="truncate font-mono text-[12.5px]" title={p.url}>
                  {p.url}
                </span>
              </span>
              {p.title ? (
                <span className="block truncate pl-5 text-[12px] text-fg-muted" title={p.title}>
                  {p.title}
                </span>
              ) : null}
              {p.error_code ? <span className="block pl-5 font-mono text-[11.5px] text-danger">{p.error_code}</span> : null}
            </span>
            <span>
              <CrawlPageStatusBadge status={p.status} />
            </span>
            <span className="text-right font-mono tabular">{p.http_status ?? <span className="text-fg-subtle">—</span>}</span>
            <span className="text-right font-mono tabular text-fg-muted">{p.depth}</span>
            <span className="text-right font-mono tabular text-fg-muted">{formatBytes(p.bytes)}</span>
            <span className="text-right font-mono tabular text-fg-muted">{formatMs(p.duration_ms)}</span>
            <span>{p.mode ? <Badge variant={p.mode === "browser" ? "accent" : "outline"}>{p.mode === "browser" ? "Browser" : "HTTP"}</Badge> : <span className="text-fg-subtle">—</span>}</span>
          </summary>
          <div className="border-t border-border bg-bg-subtle/40 px-4 py-3">
            <dl className="mb-3 grid gap-x-6 gap-y-1 text-[12px] text-fg-muted sm:grid-cols-[auto_minmax(0,1fr)]">
              {p.final_url && p.final_url !== p.url ? (
                <>
                  <dt className="text-fg-subtle">Final URL</dt>
                  <dd className="min-w-0 break-all font-mono">{p.final_url}</dd>
                </>
              ) : null}
              {p.description ? (
                <>
                  <dt className="text-fg-subtle">Description</dt>
                  <dd className="min-w-0 break-words">{p.description}</dd>
                </>
              ) : null}
              <dt className="text-fg-subtle">Content type</dt>
              <dd className="font-mono">{p.content_type ?? "—"}</dd>
              <dt className="text-fg-subtle">Links</dt>
              <dd className="font-mono tabular">{p.links_count ?? "—"}</dd>
              <dt className="text-fg-subtle">Fetched</dt>
              <dd>{p.fetched_at ? formatDate(p.fetched_at, { timeStyle: "medium" }) : "—"}</dd>
            </dl>
            {preview ? (
              <>
                <pre className="max-h-[360px] overflow-auto whitespace-pre-wrap break-words rounded-md border border-border bg-bg p-3 font-mono text-[12px] leading-relaxed scrollbar-thin">{preview}</pre>
                {truncated ? <p className="mt-1.5 text-[11.5px] text-fg-subtle">Showing the first {formatNumber(PREVIEW_CHARS)} of {formatNumber(p.content!.length)} characters.</p> : null}
              </>
            ) : (
              <p className="text-[12px] text-fg-subtle">No stored content for this page.</p>
            )}
          </div>
        </details>
      </TableCell>
    </TableRow>
  );
}